<script setup>
import { ref } from 'vue'
import PlusIcon from '@/components/icons/PlusIcon.vue'
import { useRouter } from 'vue-router'
import { Bottom, Delete, Top } from '@element-plus/icons-vue'
const router = useRouter()
// 商品状态
const status = ref('all')
function createCommodity() {
  router.push({ name: 'addProduct' })
}
defineExpose({ status })
const emits = defineEmits(['tabChange', 'shelve', 'takeDown', 'delete'])
defineProps(['showOperationButtons'])
</script>

<template>
  <div class="product-status-select-region">
    <el-tabs v-model="status" type="card" @tab-change="emits('tabChange', { selected: status })">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="出售中" name="selling"></el-tab-pane>
      <el-tab-pane label="已下架" name="offShelf"></el-tab-pane>
      <el-tab-pane label="已售罄" name="soldOut"></el-tab-pane>
    </el-tabs>
    <el-button type="primary" style="margin-left: 10px" @click="createCommodity">
      <el-icon size="20">
        <PlusIcon />
      </el-icon>
      创建商品
    </el-button>
    <el-button-group v-if="showOperationButtons" style="margin-left: 10px">
      <el-button type="default" :icon="Top" @click="emits('shelve')">上架</el-button>
      <el-button type="default" :icon="Bottom" @click="emits('takeDown')">下架</el-button>
      <el-button type="default" :icon="Delete" @click="emits('delete')">删除</el-button>
    </el-button-group>
  </div>
</template>

<style scoped lang="scss">
.product-status-select-region {
  display: flex;
  align-items: center;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  border-bottom: 1px solid transparent;
}
:deep(.el-tabs__header) {
  margin: 0;
}
:deep(.el-tabs__item.is-top) {
  font-size: 13px;
  padding: 0 15px;
}
.el-tabs {
  --el-tabs-header-height: 32px;
}
</style>
